<template>
  <div class="upload-container">
    <!-- <el-button :style="{background:color,borderColor:color}" icon="el-icon-upload" size="mini" type="primary" @click="showDialogUplate">上传图片
    </el-button>
    <el-dialog :visible.sync="dialogVisible" :modal='false'  class="editorUpload">
      <el-upload
            :action="actionUrl"
            list-type="picture-card"
            :before-upload="handleSuccessUrl"
            :on-remove="handleRemoveUrl"
            :on-change="handleChange"
            :auto-upload="false"
            :file-list="urlList"
            :multiple="true"
          >
          <i class="el-icon-plus"></i>
          </el-upload>
      <div style="margin:20px 0 0" class="flex-center">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </div>
    </el-dialog> -->
    <a-button type="primary" size='small' @click="showDialogUplate">上传图片</a-button>
    <!-- :action="actionUrl" -->
      <a-modal
        title="上传图片"
        :visible="dialogVisible"
        cancelText='关闭'
        okText='确定'
        @ok="handleSubmit"
        @cancel="dialogVisible=false">
          <a-upload
            :beforeUpload="beforeUpload"
            listType="picture-card"
            :fileList="fileList"
            :multiple='false'
            @change="handleChange">
            <div>
              <a-icon type="plus" />
              <div class="ant-upload-text">点击上传</div>
            </div>
        </a-upload>
    </a-modal>
  </div>
</template>

<script>
import api from "@/api/api";
// import { getToken } from 'api/qiniu'

export default {
  name: 'EditorSlideUpload',
  props: {
    color: {
      type: String,
      default: '#1890ff'
    }
  },
  data() {
    return {
      actionUrl: "",
      dialogVisible: false,
      urlList:[],
      fileList:[],
      file: "",
    }
  },
  methods: {
    handleSuccessUrl(file, fileList) {

    },
    showDialogUplate(){
      this.urlList=[];
      this.fileList=[];
      this.dialogVisible=true;
    },
    beforeUpload(file) {
      // 上传图片之前自己写接口上传
    },
    handleChange(file) {
      // 上传成功返回
      // this.fileList = file.fileList;
    },
    handleSubmit() {
      let _param = new FormData();
      for (var file in this.fileList) {
          _param.append("file", this.fileList[file].raw);
      }
      let pics=[]
        api.tinymcePic(_param).then(res => {
          for (let index = 0; index < res.length; index++) {
            debugger
            pics.push(api.showHOST+res[index])
          }
          this.$emit('imageSuccessCBK', pics)
          this.fileList = []
          this.dialogVisible = false
      });
      // const arr = Object.keys(this.listObj).map(v => this.listObj[v])
    
    },
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  
</style>
<style>
  .upload-container .el-upload{
    width: 148px !important;
  }

  .editor-custom-btn-container {
    top: 34px !important;
}
</style>

